<template>
  <div>
    <div class="searchBox flex alignCenter">
      <el-input
        placeholder="请输入内容"
        style="width: 1200px; height: 60px"
        prefix-icon="el-icon-search"
        v-model="searchNum"
        @input="searchList"
        :clearable="true"
      >
      </el-input>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <div class="content">
      <h3>专区</h3>
      <div style="display: flex">
        <div class="menuList">
          <div
            :class="['menuItem', activeIndex == index ? 'menuItems' : '']"
            v-for="(item, index) in zonelist"
            :key="index"
            @click="changeFun(item, index)"
          >
            {{ item.zoneName }}
          </div>
        </div>
        <div class="rightList">
          <ul>
            <li style="margin-bottom: 30px; line-height: 30px">
              {{ hotlists.zoneMessage }}
            </li>
            <li
              class="oli"
              v-for="item in hotCardList"
              :key="item.id"
              style="line-height: 30px"
              @click="toHotDetail(item.id)"
            >
              <div class="list-left">
                <span>{{ item.hotName }}</span>
              </div>
              <div class="list-right">
                <span>点赞数：{{ item.likeNum }}</span>
                <span>收藏数：{{ item.collectionNum }}</span>
                <span>评论：{{ item.commentNum }}</span>
              </div>
            </li>
          </ul>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total || null"
            @current-change="changeCurrent"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zonelist: [],
      codeId: "",
      //id查询
      hotlists: {},
      hotCardList: [],
      total: 0,
      totalPage: "",
      //   列表高亮
      activeIndex: 0,
      // 关键字
      searchNum: "",
      pid: "",
    };
  },
  methods: {
    searchList(e) {
      console.log(e);
    },
    // 专区
    async getreqzonelist() {
      let result = await this.$request.reqzonelist();
      this.zonelist = result.rows;
      this.codeId = result.rows[0].id;
    },
    // 根据专区id查内容
    async getreqzoneIdList(e) {
      let result = await this.$request.reqzoneIdList(e);
      this.hotlists = result.data || {};
    },
    // 根据专区id查内容-分页
    async getreqreqhotlists(e) {
      let result = await this.$request.reqhotlists(e);
      this.hotCardList = result.rows;
      this.total = Number(result.total);
      this.totalPage = result.totalPage;
    },
    // 点击查询
    changeFun(item, index) {
      console.log('+++',item);
      this.codeId = item.id;
      this.activeIndex = index;
      this.getreqzoneIdList(item.id);
      const data = {
        zoneId: item.id,
        pageNum: 1,
      };
      this.getreqreqhotlists(data);
    },
    // 点击分页
    changeCurrent(e) {
      const data = {
        zoneId: this.codeId,
        pageNum: e,
      };
      this.getreqreqhotlists(data);
    },
    // 点击搜索
    search() {
      const params = {
        zoneId: this.codeId,
        pageNum: 1,
        hotName: this.searchNum,
      };
      // 搜索返回接口
      this.getreqreqhotlists(params);
    },
    toHotDetail(id) {
      console.log("id: " + id);
      this.$router.push({
        path: "/hotSpotDetail",
        query: {
          id: id,
        },
      });
    },
  },
  mounted() {
    // this.$bus.$on("fath", (rel, pid) => {
    //     this.getreqzonelist().then(() => {
    //       Promise.all([
    //         this.getreqzoneIdList(rel.id),
    //         this.getreqreqhotlists({
    //           zoneId: rel.id,
    //           pageNum: 1,
    //         }),
    //       ]);
    //     });
    // });

    this.getreqzonelist().then(() => {
      Promise.all([
        this.getreqzoneIdList(this.codeId),
        this.getreqreqhotlists({
          zoneId: this.codeId,
          pageNum: 1,
        }),
      ]);
    });
  },
};
</script>

<style scoped lang="less">
.searchBox {
  width: 1200px;
  height: 60px;
  opacity: 1;
  margin: 0 auto;
  margin-top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.searchBox /deep/ .el-input input {
  width: 100%;
  height: 60px;
}

.menuList {
  width: 200px;
  height: 500px;
  background-color: #df4d4d;
  padding-top: 20px;
  box-sizing: border-box;
}

.content {
  width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 0;
}

.menuList {
  margin-top: 12px;
}

.menuItem {
  padding-left: 20px;
  line-height: 50px;
  cursor: pointer;
}

.menuItems {
  background: rgb(17, 131, 225);
}

.rightList {
  width: 100%;
  height: 500px;
  background-color: #207edd;
  margin-top: 12px;
  padding: 20px;
  box-sizing: border-box;

  ul {
    li {
      border-bottom: 1px solid #e2e2e2;
    }

    .oli {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      /* 变成手 */
    }

    .list-right {
      span {
        margin-left: 30px;
        font-size: 14px;
      }
    }
  }
}
</style>